<template>
    <div class='body'>
        <div class="main">
            <div class="top">
                <span style="color: #FF6347;">您目前所在页面为"个人信息操作页"，修改时请注意核对你的个人信息。同时切勿将您个人账户信息泄露给别人！</span>
            </div>
            <div class="bom" style="align-items: center;justify-content: space-between;flex-direction: row;">
                <div class="userbox">
                    <div class="usertitle">个人中心</div>
                    <div class="userdata">
                        <div>
                            <span v-if="users && users.qx == 'admin'" class="username" style="color: red;">{{
                                users.name }}--{{ users.info }}</span>
                            <span v-if="users && users.qx == 'uadmin'" class="username" style="color: rgb(31, 179, 179);">{{
                                users.name }}--{{ users.info }}</span>
                            <span v-if="users && users.qx == 'user'" class="username" style="color: rgb(95, 170, 20);">{{
                                users.name }}--{{ users.info }}</span>
                        </div>
                        <span style="font-size: 17px;">
                            现在时间:{{ aaa }}(北京时间)
                        </span>
                    </div>
                    <div class="userdata2" v-if="users">
                        <div>
                            <span>用户id:</span>
                            <span>{{ users.id }}</span>
                        </div>
                        <div>
                            <span>所诉权限组:</span>
                            <span>{{ users.qx }}</span>
                        </div>
                        <div>
                            <span>用户年龄:</span>
                            <span>{{ users.age }}</span>
                        </div>
                        <div>
                            <span>用户性别:</span>
                            <span>{{ users.xing }}</span>
                        </div>
                    </div>
                </div>
                <div class="usebox" v-if="users" style="font-family: '微软雅黑';">
                    <div class="usetitle">基本信息操作</div>
                    <div class="usedata">
                        <div>
                            <span>姓名: </span>
                            <el-input v-model="usersdata.name" style="width: 240px" placeholder="输入姓名" />
                        </div>
                        <div>
                            <span>年龄: </span>
                            <el-input v-model="usersdata.age" style="width: 240px" placeholder="输入年龄" />
                        </div>
                        <div>
                            <span>性别: </span>
                            <el-select v-model="usersdata.xing" placeholder="选择性别" size="large" style="width: 240px">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </div>
                        <div>
                            <span>密码: </span>
                            <el-input v-model="usersdata.psd" type="password" style="width: 240px" placeholder="请输入密码" />
                        </div>
                        <div class="subm">
                            <el-button type="primary" style="width: 150px;" @click="xiu">修改</el-button>
                            <el-button type="warning" style="width: 150px;" @click="drawer = true">修改密码</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="修改密码" direction="rtl" :before-close="handleClose">
        <span>你好, {{ users.name }}!</span>
        <div>
            <div>
                <span>旧密码: </span>
                <el-input v-model="psddata.psd" type="password" style="width: 240px" placeholder="请输入旧密码" />
            </div>
            <div>
                <span>新密码: </span>
                <el-input v-model="psddata.newpsd" type="password" style="width: 240px" placeholder="请输入新密码" />
            </div>
            <div>
                <el-button type="warning" style="width: 150px;" @click="cancelClick">确认修改</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup lang='ts'>
import { toudata, updatauser } from '@/api/info/index'
import { useRouter } from "vue-router";
const router = useRouter()
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus'
const drawer = ref(false)
let users = ref()
let usersdata: any = reactive({
    id: "",
    name: "",
    age: "",
    xing: "",
    psd: "",
    newpsd: "null",
})
let aaa: any = ref()
onMounted(() => {
    // // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);
    // 测试base64存储
    getuser()
    gettiem()
})
// 获取当前用户信息
let getuser = () => {
    toudata().then((res: any) => {
        console.log("imgs", res);
        users.value = res.data[0]
        usersdata.name = res.data[0].name
        usersdata.age = res.data[0].age
        usersdata.xing = res.data[0].xing
        usersdata.id = res.data[0].id
        psddata.id = res.data[0].id
    })
}
// 实时时间
let gettiem = () => {
    setInterval(() => {
        const loginTime1 = new Date();
        aaa.value = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    }, 1000)
}
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
// 修改基础信息
let xiu = () => {
    for (const key in usersdata) {
        if (usersdata[key] == "") {
            open4("请正确输入信息(检查是否有未填项)")
            return
        }
    }
    updatauser(usersdata).then(res => {
        console.log("uppppppp", res);
        getuser()
        if (res.data.message) {
            open2(res.data.message)
        } else {
            open4(res.data.error)
        }
    })

}

// 抽屉+修改密码
let psddata: any = reactive({
    id: "",
    psd: "",
    newpsd: ""
})
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定取消修改？')
        .then(() => {
            done()
            psddata.psd = ""
            psddata.newpsd = ""
        })
        .catch(() => {
            // catch error
        })
}
function cancelClick() {
    for (const key in psddata) {
        if (psddata[key] == "") {
            open4("请正确输入信息(检查是否有未填项)")
            return
        }
    }
    updatauser(psddata).then(res => {
        console.log("upppppppsssdddd", res);
        getuser()
        if (res.data.message) {
            open2(res.data.message)
            drawer.value = false
            psddata.psd = ""
            psddata.newpsd = ""
            setTimeout(() => {
                window.localStorage.removeItem("token")
                router.push({
                    path: "/login"
                })
            }, 1000);

        } else {
            open4(res.data.error)
            drawer.value = false
            psddata.psd = ""
            psddata.newpsd = ""
        }
    })
}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;

            background-color: #fff;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;


            .userbox {
                margin-top: -80px;
                background-color: #fff;
                width: 500px;
                height: 500px;
                box-sizing: border-box;
                border-radius: 5px;
                box-shadow: -7px 4px 32px 0px rgba(0, 0, 0, 0.1);
                font-family: "楷体";

                .usertitle {
                    width: 100%;
                    height: 80px;
                    text-align: left;
                    text-indent: 2em;
                    line-height: 80px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ebecf3;
                    font-size: 18px;
                }

                .userdata {
                    width: 90%;
                    height: 120px;
                    margin: 0 auto;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ebecf3;
                    text-align: center;
                    padding: 20px 0px 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;

                    .username {
                        font-size: 25px;
                    }
                }

                .userdata2 {
                    width: 90%;
                    height: 280px;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        width: 70%;
                        height: 65px;
                        font-size: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }

            }

            .usebox {
                margin-top: -80px;
                background-color: #fff;
                width: 800px;
                height: 500px;
                box-sizing: border-box;
                border-radius: 5px;
                box-shadow: -7px 4px 32px 0px rgba(0, 0, 0, 0.1);

                .usetitle {
                    width: 100%;
                    height: 80px;
                    text-align: left;
                    text-indent: 2em;
                    line-height: 80px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ebecf3;
                    font-size: 18px;

                }

                .usedata {
                    width: 100%;
                    height: 400px;
                    font-size: 25px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                }

                el-option {
                    padding-left: 11px;
                }
            }
        }
    }
}
</style>